import React from "react";

const emojis = [
  "😊",
  "😂",
  "😍",
  "🤔",
  "👍",
  "👋",
  "❤️",
  "🙏",
  "🔥",
  "🎉",
  "😢",
  "😅",
  "😭",
  "😱",
  "😡",
  "💪",
  "👏",
  "🎈",
  "🎁",
  "🍺",
  "🍕",
  "🍎",
  "⚽",
  "🏀",
  "🏆",
  "🌹",
  "🎂",
  "🎮",
  "🚀",
  "📱",
];

interface EmojiPickerProps {
  onSelect: (emoji: string) => void;
}

const EmojiPicker: React.FC<EmojiPickerProps> = ({ onSelect }) => {
  return (
    <div className="bg-white shadow-lg rounded-xl p-2 w-64">
      <div className="text-gray-500 text-sm mb-2 px-2">表情包</div>
      <div className="grid grid-cols-6 gap-2 max-h-40 overflow-y-auto">
        {emojis.map((emoji, index) => (
          <button
            key={index}
            className="text-2xl hover:bg-gray-100 rounded-lg p-1 transition-colors duration-200"
            onClick={() => onSelect(emoji)}
          >
            {emoji}
          </button>
        ))}
      </div>
    </div>
  );
};

export default EmojiPicker;
